<!--
 * @Author: shimmer
 * @Date: 2023-07-28 08:54:48
 * @LastEditors: shimmer
 * @LastEditTime: 2023-08-08 13:25:37
 * 
-->
<template>
  <div class="top-container">
    <div class="left-box">
      <div class="icon-wrapper">
       Shimmer Music
      </div>
      <div class="history-wrapper">
        <span class="iconfont icon-arrow-lift" @click="back"></span>
        <span class="iconfont icon-arrow-right" @click="go"></span>
      </div>
    </div>
    <div class="right-box" @keyup.enter="search">
        <el-input
          type="text"
          autocomplete="off"
          placeholder="搜索"
          v-model="inputVal"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
    </div>

  <div>
    <el-button type="primary" @click="visible = true">登录</el-button>
  </div>

  <el-dialog title="登录" :visible.sync="visible" :modal="false" width="400px" :append-to-body="true" >
  <el-form :model="form">
    <el-form-item label="账号" :label-width="formLabelWidth">
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth">
      <el-input v-model="form.password" autocomplete="off" type="password"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="login">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'top',
    data() {
      return {
        query: '',
        inputVal: '',
        formLabelWidth: '50px',
        visible: false,
        form:{
          phone:"15161582526",
          password:"wyydmms123123"
        }
      }
    },
    methods: {
      search () {
        if (this.inputVal ===''){
          return this.$message.warning('请输入搜索内容！')
        }
        this.$router.push('/result?q='+this.inputVal)
      },
      go() {
        this.$router.go(1)
      },
      back() {
        this.$router.go(-1)
      },
      async login() {
      const data= await this.$http.get(
        `https://autumnfish.cn/login/cellphone`,
        {
          params: {...this.form },
        }
      )
      console.log('data: ', data);
     
     
    },
    }
  }
</script>

<style >
.icon-wrapper{
  margin-top: 10px;
  align-items: center;
}

</style>
